import React from 'react'
import '../../../static/font/iconfont.css'
import './leftenergyconsumption.scss'
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
//上
const options1 = {
    credits: {
        enabled: false,
    },
    title: {
        text: ''
    },
    yAxis: {
        gridLineColor: "rgba(121, 121, 121, 1)",
        maxStaggerLines: 5,
        tickPixelInterval: 2,
        title: {
            text: null
        },
        labels: {
            style: {
                color: 'white'
            },
        },
        tickPositions: [0, 250, 500, 750, 1000, 1250]
    },
    chart: {
        backgroundColor: null,
        height: 200,
        width: 530,
        type: 'spline'
    },
    xAxis: {
        labels: {
            style: {
                color: 'white'
            }
        },
        lineColor: 'rgba(201, 201, 201, 201)',
        categories: ['12/15', '12/16', '12/17', '12/18', '12/19', '12/20'],

    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        y: 0,
        itemStyle: {
            color: '#fff',
            fontWeight: 400
        }
    },
    // 设置线
    series: [{
        name: '光伏发电量',
        data: [750, 650, 1000, 700, 600, 800],
        color: 'rgb(39,112,187)',
        // 隐藏点
        marker: {
            enabled: false
        }
    }, {
        name: '减排量',
        data: [1000, 900, 800, 600, 500, 780],
        color: "rgb(98,217,173)",
        // 隐藏点
        marker: {
            enabled: false
        }
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 400
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'top'
                }
            }
        }]
    }
}

const Charts1 = () => <div>
    <HighchartsReact
        highcharts={Highcharts}
        options={options1}
        style={{ height: '500px' }}
    />
</div>





// 下
const options3 = {
    credits: {
        enabled: false,
    },
    title: {
        text: ''
    },
    yAxis: {
        gridLineColor: "rgba(121, 121, 121, 1)",
        maxStaggerLines: 5,
        tickPixelInterval: 2,
        title: {
            text: null
        },
        labels: {
            style: {
                color: 'white'
            },
        },
        tickPositions: [100, 200, 300, 400, 500, 600, 700, 800]
    },
    chart: {
        backgroundColor: null,
        height: 250,
        width: 530,
        type: 'areaspline'
    },
    plotOptions: {
        series: {
            fillColor: {
                linearGradient: [0, 0, 0, 220],
                stops: [
                    [0, 'rgba(55,62,120,.92)'],
                    [1, 'rgb(42,154,168)']
                ]
            }
        }
    },
    xAxis: {
        labels: {
            style: {
                color: 'white'
            }
        },
        lineColor: 'rgba(201, 201, 201, 201)',
        categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

    },
    legend: {
        align: 'left',
        verticalAlign: 'top',
        y: 0,
        itemStyle: {
            color: '#fff',
            fontWeight: 400
        }
    },
    // 设置线
    series: [{
        name: '2021年',
        data: [200, 250, 350, 450, 350, 750, 420, 600, 700, 460, 750, 430],
        color: 'rgb(136,104,233)',

    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 400
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'top'
                }
            }
        }]
    }
}

const Charts3 = () => <div>
    <HighchartsReact
        highcharts={Highcharts}
        options={options3}
        style={{ height: '500px' }}
    />
</div>
const tableTd = [
    { id: 1, type: "工厂用电", quantity: 1000, percentage: "98%" },
    { id: 2, type: "工厂用煤", quantity: 950, percentage: "88%" },
    { id: 3, type: "员工充电", quantity: 850, percentage: "65%" },
    { id: 4, type: "日常照明", quantity: 750, percentage: "55%" },
    { id: 5, type: "设备未关", quantity: 650, percentage: "48%" },
    { id: 6, type: "光伏发电", quantity: 600, percentage: "40%" },
]

function Left_Energy_consumption() {
    return (
        <div className='Left_Energy_consumption_box'>
            {/* 上 */}
            <div className='Left_Energy_consumption_top'>
                <div>
                    <h2 style={{ color: "#fff", margin: "1.5% 0px 1% 3%", fontSize: 20 }}>绿色能源</h2>
                    <div className='Left_Energy_consumption_top_icon'>
                        <div className='Left_Energy_consumption_top_icon_child' >
                            <div className='iconfont icon-a-47zuzhi'></div>
                            <div>
                                <div>充电桩数量</div>
                                <div>102个</div>
                            </div>
                        </div>
                        <div className='Left_Energy_consumption_top_icon_child'>
                            <div className='iconfont icon-a-47zuzhi'></div>
                            <div>
                                <div>充电桩数量</div>
                                <div>102kWh</div>
                            </div>
                        </div>
                        <div className='Left_Energy_consumption_top_icon_child'>
                            <div className='iconfont icon-a-47zuzhi'></div>
                            <div>
                                <div>充电桩数量</div>
                                <div>102MW</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <Charts1 />
                </div>
            </div>

            {/* 中 */}
            <div className='Left_Energy_consumption_center'>
                <table>
                    <thead>
                        <tr>
                            <th>类型</th>
                            <th>数量</th>
                            <th>占比</th>
                        </tr>
                    </thead>
                    <tbody>
                        {tableTd.map((item) => {
                            return (
                                <tr key={item.id}>
                                    <td>{item.type}</td>
                                    <td>{item.quantity}</td>
                                    <td>
                                        <div className='Left_Energy_consumption_center_td'>
                                            <div style={{ width: item.percentage }}></div>
                                        </div>
                                        <div>{item.percentage}</div>
                                    </td>
                                </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>

            {/* 下 */}
            <div className='Left_Energy_consumption_bottom'>
                <div>
                    <h2 style={{ color: "white", margin: "3% 0px -7px 5%", fontSize: 20 }}>年度碳排放量趋势</h2>
                </div>
                <div>
                    <Charts3 />
                </div>
            </div>
        </div>
    )
}

export default Left_Energy_consumption